<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="./css/zTree/zTreeStyle.css">
  <title>Document</title>
</head>

<body>
  <div>
    <ul style="width: 45%;float: left" id="treeDemo" class="ztree"></ul>
    <div style="width: 45%; float: right" id="content"></div>
  </div>
  <script src="../scripts/jquery.min.js" type="text/javascript"></script>
  <script src="../scripts/zTree/js/jquery.ztree.core.js" type="text/javascript"></script>
  <script src="../dist/tree-demo.js" type="text/javascript"></script>
  <script>
    var zTreeObj;
    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
      view: {
        dblClickExpand: false
      }
    };
    // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
    var zNodes = [
      {
        name: "test1", open: true, children: [
          { name: "test1_1", children:[
            {name: "test1_1_1"},
            {name: "test1_1_2"}
          ] }, { name: "test1_2" }]
      },
      {
        name: "test2", open: true, children: [
          { name: "test2_1" }, { name: "test2_2" }]
      }
    ];
    $(function () {
      $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    })
  </script>
</body>

</html>